import UserLayout from './index';
import router from 'next/router';
import {Form, Input, Button, Icon, message} from 'antd';
import axios from '../../utils/axios'

function UserAdd(props) {
  const {getFieldDecorator} = props.form; // ← Form.create传的

  async function handleSubmit(event) {
    event.preventDefault();
    let values = props.form.getFieldsValue();
    let response = await axios.post('/api/register', values);
    console.log('response:',response);
    if (response.data.code === 0) {
      console.log('~~~~~~~~~~~');
      router.push('/user/list');
    } else {
      console.log('!!!!!!!!!');
      message.error('添加用户失败');
    }
  }

  return (
    <UserLayout>
      <Form onSubmit={handleSubmit} className="login-form" style={{ maxWidth: '300px' }}>
        <Form.Item>
          {getFieldDecorator('username', {
            rules: [{required: true, message: 'Please input your username!'}],
          })(
            <Input
              prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
              placeholder="Username"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('password', {
            rules: [{required: true, message: 'Please input your Password!'}],
          })(
            <Input
              prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
              type="password"
              placeholder="Password"
            />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            添加用户
          </Button>
        </Form.Item>
      </Form>
    </UserLayout>
  )
}

export default Form.create({name: 'UserAdd'})(UserAdd);
